<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>【前方高能】这个视频太绝了！看完直呼过瘾 - bilibili</title>
    <link rel="icon" sizes="any" href="img/favicon.ico">
    <link rel="stylesheet" href="./css/video.css">
    <script src="js/jquery.js"></script>
</head>
<body>
    <!-- 头部导航 - 包含登录功能 -->
    <header>
        <div class="container header-container">
            <div class="logo">
                <img src="img/favicon.ico" alt="bilbil logo">
                <span>bilibili0</span>
            </div>
            <ul class="nav-menu">
                <li><a href="#">首页</a></li>
                <li><a href="#">番剧</a></li>
                <li><a href="#">直播</a></li>
                <li><a href="#">游戏中心</a></li>
                <li><a href="#">会员购</a></li>
                <li><a href="#">漫画</a></li>
                <li><a href="#">赛事</a></li>
            </ul>
            <div class="search-bar">
                <i class="fas fa-search"></i>
                <input type="text" placeholder="搜索视频、番剧...">
            </div>
            <div class="user-actions">
                <!-- 用户状态区域 -->
                <div id="userState" class="user-state">
                    <div id="login">
                        <a href="javascript:void(0);">
                            <span class="spanMsg">等录</span>
                        </a>
                    </div>
                    <div class="user-avatar" id="userAvatar" style="display: none;">
                        <img id="avatarImg" src="img/1.jpg" alt="用户头像">
                        <div class="avatar-upload-btn">
                            <i class="fa fa-camera"></i>
                            <input type="file" class="avatar-input" accept="image/*" onchange="previewAvatar(this)">
                        </div>
                    </div>
                    <div class="user-menu" id="userMenu">
                        <div class="user-menu-item" onclick="goToProfile()">
                            <i class="fa fa-user"></i>
                            <span>我的主页</span>
                        </div>
                        <div class="user-menu-divider"></div>
                        <div class="user-menu-item logout" onclick="logout()">
                            <i class="fa fa-sign-out"></i>
                            <span>退出登录</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- 登录弹窗 -->
    <div class="login-overlay" id="loginOverlay">
        <div class="login-popup">
            <button class="close-btn" id="closeLoginPopup">&times;</button>
            <h2 class="login-title">用户登录/注册</h2>
            <div class="tab-header">
                <span class="tab active" data-tab="login">登录</span>
                <span class="tab" data-tab="register">注册</span>
            </div>

            <!-- 登录表单 -->
            <div class="tab-content active" data-tab="login">
                <form id="loginForm">
                    <div class="form-group">
                        <label for="username">用户名</label>
                        <input type="text" id="username" placeholder="请输入用户名">
                    </div>
                    <div class="form-group">
                        <label for="password">密码</label>
                        <input type="password" id="password" placeholder="请输入密码">
                    </div>
                    <div class="error-msg" id="errorMsg"></div>
                    <button type="submit" class="login-btn">确认登录</button>
                </form>
            </div>

            <!-- 注册表单 -->
            <div class="tab-content" data-tab="register">
                <form id="registerForm">
                    <div class="form-group">
                        <label for="reg-username">用户名</label>
                        <input type="text" id="reg-username" placeholder="请输入用户名">
                    </div>
                    <div class="form-group">
                        <label>性别</label>
                        <div class="gender-group">
                            <label class="radio-label">
                                <input type="radio" name="gender" value="male" required> 男
                            </label>
                            <label class="radio-label">
                                <input type="radio" name="gender" value="female" required> 女
                            </label>
                            <label class="radio-label">
                                <input type="radio" name="gender" value="secret" required> 保密
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>出生日期</label>
                        <div class="birthday-group">
                            <select id="reg-year" class="birthday-select" placeholder="年份">
                                <option value="">年份</option>
                            </select>
                            <select id="reg-month" class="birthday-select" placeholder="月份">
                                <option value="">月份</option>
                            </select>
                            <select id="reg-day" class="birthday-select" placeholder="日期">
                                <option value="">日期</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="reg-email">邮箱</label>
                        <input type="email" id="reg-email" placeholder="请输入邮箱">
                    </div>
                     <div class="form-group">
                        <label for="reg-nickName">真实姓名</label>
                        <input type="text" id="reg-nickName" name="nickName" placeholder="请输入真实姓名">
                    </div>
                    <div class="form-group">
                        <label for="reg-password">密码（≥6位）</label>
                        <input type="password" id="reg-password" placeholder="请输入密码">
                    </div>
                    
                    <div class="error-msg" id="reg-errorMsg"></div>
                    <button type="submit" class="login-btn">立即注册</button>
                </form>
            </div>

            <!-- 角落装饰图 -->
            <img src="img/小人1.jpg" class="corner-img left" id="img1">
            <img src="img/小人2.jpg" class="corner-img right" id="img2">
            <img src="img/小人3.jpg" class="corner-img left hide" id="img3">
            <img src="img/小人4.jpg" class="corner-img right hide" id="img4">
        </div>
    </div>


    <!-- 主要内容区 -->
    <main class="container">
        <div class="content-wrapper">
            <!-- 视频播放区 -->
            <div class="video-area">
                <div class="video-header">
                    <div class="video-info">
                        <h1 id="videoTitle"></h1>
                    </div>
                    
                    <!--修改的  -->
                    <div class="video-meta">
                        <span><i class="fas fa-eye"></i> 0</span>
                        <span><i class="fas fa-comment"></i> 0</span>
                        <span><i class="fas fa-thumbs-up"></i> 0</span>
                        <span><i class="fas fa-share-alt"></i> 分享</span>
                        <span>0000-00-00</span>
                    </div>
                </div>
                
                <!-- 整合后的B站风格播放器 -->
                <div class="bili-player">
                    <div class="container">
                        <!-- 主播放器区域 -->
                            <div class="video-container">
                            <input type="hidden" id="fakeVideoId" value="1">
              				<div class="danmaku_container" id="danmakuContainer"></div>
                                <video id="mainVideo"  preload="metadata">
                                	<!-- 初始视频源 -->
         							<source src="" type="video/mp4" data-quality="1080P">
                                </video>
                                <div class="danmaku-layer" id="danmakuLayer"></div>
                            </div>
                    </div>

                    <!-- 控制条 -->
                    <div class="control-bar" id="controlBar">
                        <button class="control-btn" id="playPauseBtn">▶</button>
                        <div class="progress-container" id="progressContainer">
                            <div class="progress-bar" id="progressBar"></div>
                        </div>
                        <span id="currentTime">00:00</span> / <span id="duration">00:00</span>
                        <button class="control-btn" id="speedBtn">1.0x</button>
                        <button class="control-btn" id="fullscreenBtn">🗖</button>
                        <button class="control-btn" id="volumeBtn">🔊</button>
                        <div class="volume-container" id="volumeContainer">
                            <div class="volume-bar" id="volumeBar"></div>
                        </div>
                        <button class="control-btn" id="danmakuBtn">📝</button>
                        <select class="control-btn" id="qualitySelect">
                            <option value="1080P">1080P</option>
                            <option value="720P">720P</option>
                            <option value="480P">480P</option>
                        </select>
                    </div>

                    <!-- 弹幕输入框 -->
                    <input type="text" name="content" class="danmaku-input" id="danmakuInput" placeholder="发送弹幕...">
                </div>
               
                <div class="video-info">
                    <div class="up-info">
                        <div class="up-avatar">
                            <img src="img/小人1.jpg" alt="up主头像">
                        </div>
                        <div class="up-detail">
                            <div class="up-name">
                                <a href="#">默认up主名字</a>
                            </div>
                            <div class="up-desc"> 粉丝数：</div>
                        </div>
                        <div class="action-buttons">
                            <button class="action-btn">
                                <i class="fas fa-plus"></i> 关注
                            </button>
                        </div>
                    </div>
                    <div class="video-desc">
                        <h3 class="section-title">视频简介</h3>
                        <p id="videoDescription"></p>
                    </div>
                    <!--修改的  -->
                    <div class="action-buttons">
                        <button class="action-btn">
                            <i class="fas fa-thumbs-up"></i> 点赞 (0)
                        </button>
                        <button class="action-btn">
                            <i class="fas fa-bookmark"></i> 收藏 (0)
                        </button>
                      
                    </div>
                </div>
                
                <!-- 评论区 -->
                 <div class="comment-section">
                    <h2 class="section-title">评论 </h2>
                    <div class="comment-form">
                         <div class="commenter-avatar-small">
        						<img src="img/小人1.jpg" alt="用户头像">
    					</div>
                        <div class="comment-input-container">
                            <textarea class="comment-input" placeholder="留下你的精彩评论..."></textarea>
                            <button class="send-comment" id="sendComment">发送</button>
                        </div>
                    </div>
                    <ul class="comment-list" id="commentList">
                        <li class="comment-item">
    <div class="comment-avatar">
        <img src="user-avatar.jpg" alt="用户头像">
    </div>
    <div class="comment-content">
        <div class="comment-header">
            <span class="comment-user">用户名</span>
            <span class="comment-time">1小时前</span>
        </div>
        <div class="comment-body">这条视频太精彩了！非常喜欢！</div>
        <div class="comment-footer">
            <!-- 点赞按钮（含数字） -->
            <button class="comment-like">
                <i class="fas fa-thumbs-up" style="margin-right: 4px;"></i>
                <span class="like-count">0</span> 点赞
            </button>
            <!-- 回复按钮 -->
            <button class="comment-reply">
                <i class="fas fa-reply" style="margin-right: 4px;"></i>
                回复
            </button>
        </div>
    </div>
</li>
                    </ul>
                </div>
            </div>

            <!-- 侧边栏 -->
            <div class="sidebar">
                <div class="sidebar-card">
                    <div class="card-header">相关推荐</div>
                        <!-- 视频列表 -->
                        <div class="recommendVideo-list" id="recommendVideoList">
                            <!-- 推荐视频将通过JavaScript动态添加 -->
                        </div>
                </div>
              <!--   <div class="sidebar-card">
                    <div class="card-header">热门标签</div>
                    <div class="tags" style="padding: 10px;">
                        <span>创意</span>
                        <span>脑洞</span>
                        <span>设计</span>
                        <span>高能</span>
                        <span>视觉</span>
                        <span>创意视频</span>
                        <span>搞笑</span>
                        <span>生活</span>
                        <span>科技</span>
                        <span>动画</span>
                    </div>
                </div> -->
            <!--    <div class="sidebar-card">
                    <div class="card-header">热门活动</div>
                    <div style="padding: 10px;">
                        <div style="margin-bottom: 10px; position: relative; height: 80px; overflow: hidden; border-radius: 6px; background-color: #f0f0f0;">
                            <img src="img/小人1.jpg" alt="活动图片" style="width: 100%; height: 100%; object-fit: cover;">
                            <div style="position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,0.7), transparent); color: white; padding: 5px 10px; font-size: 12px;">创意视频大赛</div>
                        </div>
                        <div style="margin-bottom: 10px; position: relative; height: 80px; overflow: hidden; border-radius: 6px; background-color: #f0f0f0;">
                            <img src="img/小人1.jpg" alt="活动图片" style="width: 100%; height: 100%; object-fit: cover;">
                            <div style="position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,0.7), transparent); color: white; padding: 5px 10px; font-size: 12px;">夏日创作挑战</div>
                        </div>
                    </div>
                </div> -->
            </div>
        </div>
    </main>
     
    <script src="./js/video.js"></script>
</body>
</html>